<template>
  <div id="yaLi">
    <div class="bg-color-my">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-line" width="0.3rem" height="0.3rem"></icon>
        </span>
        <div class="d-flex">
          <span
            class="fs-xl text mx-2"
            style="line-height: 0.3rem;font-size: 0.2rem;color: white;"
            >分水口压力情况</span
          >
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board :config="config" style="width:100%;height:4.75rem" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ["分水口", "压力Mpa", "30分趋势"],
        data: [
          ["副控中心", "0","<span  class='colorGrass'>00%</span>"],
          ["格里坪", "0", "<span  class='colorGrass'>-0%</span>"],
          ["陶家渡", "0",   "<span  class='colorGrass'>-0%</span>"],
          ["河门口", "0",   "<span  class='colorGrass'>-0%</span>"],
          ["荷花池", "0",  "<span  class='colorGrass'>-0%</span>"],
          ["小宝鼎", "0",  "<span  class='colorGrass'>-0%</span>"],
          ["大渡口", "0",  "<span  class='colorGrass'>-0%</span>"],
          ["炳草岗", "0", "<span  class='colorGrass'>-0%</span>"],
          ["密地", "0",   "<span  class='colorGrass'>-0%</span>"],
          ["金江", "0",    "<span  class='colorGrass'>-0%</span>"],

          ["马店河", "0", "<span  class='colorGrass'>-0%</span>"],
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: "#274ae8", //表头
        oddRowBGC: "#1131c1", //奇数行
        evenRowBGC: "#142a90", //偶数行
        index: true,
        columnWidth: [50],
        align: ["center"]
      }
    };
  },
  components: {},
  created() {
	  setTimeout(()=>{
		  this.changData();
		   this.timer = setInterval(this.changData, 60000);
	  },100)

  },
  methods: {
    async changData(){
      var _this=this;
      let result = await _this.$http.get("api/bi/selectFSKSSYLQS.do?beforeMins=30");
      if(result  &&  result.status===200){
        var dbData = result.data

        for (let i = 0; i < dbData.length; i++) {
          let t = dbData[i];
          if(t.value){
            t.value = Number(t.value).toFixed(3);
            t.value =t.value-0;
          }
          let spanStr = this.getspanStr(t.hisValue,t.value);

          //_this.config.data[i].value-=_this.config.data[i].value//
          _this.config.data[i][1]=t.value;
          _this.config.data[i][2] = spanStr;

        }
        //this.config.data[0].value +=2000
        _this.config = JSON.parse(JSON.stringify(_this.config))
      }
    },
    getspanStr(dat1,datnew){
      let prop = 0;
      if(!dat1||!datnew){
        return  "<span  class='colorGrass'>-0%</span>";
      }
      if(dat1<datnew){
        prop =  ((datnew-dat1)*100/dat1).toFixed(2)
        return  "<span  class='colorGrass'>↑"+prop+"%</span>";
      }else  if(dat1>datnew){
        prop =  ((dat1-datnew)*100/dat1).toFixed(2)
        return  "<span  class='colorRed'>↓"+prop+"%</span>";
      }else
      {
        return  "<span  class='colorGrass'>-0%</span>";
      }
    }

  }
};
</script>

<style lang="scss" scoped>
#yaLi {
  padding: 0.2rem;
  height: 5.775rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-my {
    height: 5.3625rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 0.125rem;
    overflow: hidden;
  }
}
</style>
